<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.phone"
        placeholder="请输入手机号"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.type"
        placeholder="请输入状态"
        clearable
        style="width: 120px"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      >
        <el-option
          label="未验证"
          value="0"
          aria-checked=""
        />
        <el-option
          label="已验证"
          value="1"
        />
      </el-select>
      <el-date-picker
        v-model="listQuery.startDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择开始日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.endDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择结束日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />

      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>

    </div>

    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="用户ID"
        align="center"
        width=""
      />
      <el
        <el-table-column
        prop="phone"
        label="手机号"
        align="center"
        width=""
      />
      <el-table-column
        prop="code"
        label="验证码"
        align="center"
        width=""
      />
      <el-table-column
        label="状态"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.state | stateFilter }}
        </template>
      </el-table-column>

      <el-table-column
        prop="accessIp"
        label="IP"
        align="center"
        width=""
      />

      <el-table-column
        label="创建时间"
        width=""
        align="center"
        prop="created"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="description"
        label="描述"
        width="220"
        align="center"
      /> -->
      <!-- <el-table-column
        prop="remark"
        label="备注"
        min-width=""
        align="center"
      /> -->

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>
</template>
<script>
const defaultFormThead = ['apple', 'banana']
import { codeList } from '@/api/v1'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { parseTime } from '@/utils'

export default {
  directives: { waves },
  components: { Pagination },
  filters: {
    stateFilter(state) {
      if (state == 1) {
        return '已验证'
      } else if (state == 0) {
        return '未验证'
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      tableData: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      cooperation: [],
      listQuery: {
        page: 1,
        limit: 20,
        sort: '+id',
        phone: '',
        type: '',
        startDay: '',
        endDay: ''
      },
      key: 1, // table key
      formTheadOptions: ['apple', 'banana', 'orange'],
      checkboxVal: defaultFormThead, // checkboxVal
      formThead: defaultFormThead // 默认表头 Default header
    }
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      )
      this.key = this.key + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },
  created() {
    const id = this.$route.query.id
    this.listQuery.cooperation = id
    console.log(id)
    this.getList()
  },
  methods: {
    // getCooperationTrade: function(id) {
    //   getCooperationTrade({ id: id })
    //     .then(response => {
    //       this.tableData = response.data.items;
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    handleDownload() {
      down(this.listQuery).then(res => {
        console.log(res)
        this.$router.push({
          path: '/down'
        })
      })
    },
    getList() {
      this.listLoading = true
      codeList(this.listQuery).then(res => {
        this.tableData = res.data.records
        this.total = Number(res.data.total)
        console.log(this.tableData)
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getCooperationAll() {
      cooperationAll().then(res => {
        this.cooperation = res.data

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>

